<template>
  <div class="system_ip">

    <el-card class="content">
      <el-table :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="IP" align="center">
          <template slot-scope="scope">
            {{ scope.row.ip }}
          </template>
        </el-table-column>
        <el-table-column label="访问时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createdAt}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="searchData(scope.row.ip)">统计</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="IP信息" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="ip" label="IP"></el-table-column>
          <el-table-column property="createdAt" label="最近访问时间"></el-table-column>
          <el-table-column property="count" label="总次数"></el-table-column>
        </el-table>
      </el-dialog>

      <div class="pagination">
        <el-pagination background :current-page.sync="page" layout="total, prev, pager, next" :total="count" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'IPList',
  data() {
    return {
      list: null,
      listLoading: true,
      count: 0,
      page: 1,
      size: 10,
      dialogTableVisible: false,
      gridData: []
    }
  },
  created() {
    this.getIPList()
  },
  methods: {
    // 自定义表格索引
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
    },
    // 获取IP列表
    getIPList(page = 1, size = 10) {
      this.$api.httpIPLog({ page, size }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.rows
          this.count = res.data.meta.count
        }
      })
    },
    // 统计IP
    searchData(ip) {
      this.gridData = []
      this.dialogTableVisible = true
      this.$api.httpIPCount({ ip }).then((res) => {
        if (res.code == 200) {
         this.gridData.push(res.data.rows[0])
         this.gridData[0].count = res.data.meta.count
        }
      })
    },
    // 点击页码
    handleCurrentChange(page) {
      this.getIPList(page, this.size)
    },
    // 重置表单
    resetSearchData() {
      this.$refs['searchForm'].resetFields()
      this.getIPList()
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 14px;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
